<template>
  <div>
    <div v-for="(row, index) in tags" :key="index">
      <el-form-item :label="row.name" prop="name">
        <el-input v-model="row.value" :placeholder="row.placeholder" width="400px"></el-input>
      </el-form-item>
    </div>

    <el-button @click="updateTags">+ Save Dict</el-button>

  </div>
</template>

<script lang="ts">
import { computed } from '@vue/reactivity';
import { defineComponent, reactive, ref } from 'vue';

interface Tag { name: '说明书链接', placeholder: '输入url', key: 'manualUrl', value: '' }

// 定义组件
export default defineComponent({
  name: 'DictsControl',
  props: ['tags', 'attributes'],
  emits: ['updateTags'],
  setup(props, { emit }) {

    // console.log('--------', props.tags)
    // 响应式状态，用于存储标签数据和输入框内容

    const tags = computed(() => {
      // 将json对象的值赋予数组
      if (props.attributes != null) {
        props.tags.forEach((item:Tag) => {
          if (props.attributes.hasOwnProperty(item.key)) {
            item.value = props.attributes[item.key];
          }
        });
      }
      return props.tags
    })

    const updateTags = () => {
      // 将数组转化成json对象
      const result = tags.value.reduce((obj:any, item:Tag) => {
        obj[item.key] = item.value;
        return obj;
      }, {});

      emit('updateTags', result);
    }

    // 将变量和方法暴露给模板
    return {
      tags,
      updateTags,
    };
  },
});
</script>
